<template>
  <el-container class="container_left">
    <el-button @click="addChat" class="chat_btn">新建聊天</el-button>
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
      <li
        v-for="i in 5"
        :key="i"
        class="infinite-list-item"
        @mouseenter="showDropdown(i)"
        @mouseleave="hideDropdown(i)"
      >
        <span class="infinite-list-i">{{ i }}</span>
        <el-dropdown
          v-show="dropdownVisible[i]"
          @command="handleCommand"
          class="infinite-list-i"
        >
          <span class="el-dropdown-link">
            <el-icon><MoreFilled /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu v-show="dropdownVisible[i]">
              <el-dropdown-item command="Delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
    <el-popconfirm
      width="200"
      confirm-button-text="是"
      cancel-button-text="否"
      title="确认清空聊天记录吗 ?"
      @confirm="confirmEvent"
    >
      <template #reference>
        <el-button class="clear_chat_btn">清空聊天记录</el-button>
      </template>
    </el-popconfirm>
    <!-- <div class="avatar">
      <el-avatar
        :size="45"
        src="https://pics3.baidu.com/feed/6609c93d70cf3bc7051c491fcf74eda9cc112aa5.jpeg@f_auto?token=a742b66c2488c735c461032db43e0781"
      />
      <el-tooltip
        effect="light"
        :content="store?.accountInfo?.nickname"
        placement="top-start"
      >
        <h3 class="username">{{ store?.accountInfo?.nickname }}</h3>
      </el-tooltip>
      <el-icon class="icon" size="20" @click="handleSet"><Setting /></el-icon>
    </div> -->
  </el-container>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { Ref, inject, reactive, ref, watch } from "vue";
import {
  Location,
  Postcard,
  Setting,
  Document,
  User,
  MoreFilled,
} from "@element-plus/icons-vue";
import { local } from "@/utils/storage";
import Dialog from "@/components/Dialog.vue";
import { AccountApi } from "@/api/api";
import { IStore } from "@/App.vue";
import { AccountEditReq } from "@/api/req";

interface DropdownVisible {
  [key: number]: boolean;
}

// 引入全局信息
const store = inject<IStore>("store");

// 表单实列
const ruleFormRef = ref<FormInstance>();
const dropdownVisible: Ref<DropdownVisible> = ref({});

const data = reactive({
  // 弹窗状态
  dialogVisible: {
    visible: false,
  },
  // 修改信息弹窗
  editInfoDialog: {
    visible: false,
  },
  //修改loading
  editLoading: false,
});

// 输入框实列
let userData = reactive<AccountEditReq>({
  // 账号
  username: "",
  //姓名
  nickname: "",
  // 住址
  address: "",
  // 头像
  avatar: "",
});

// loading
const submitLoading = ref(false);

// const dialogVisible = ref(false);
// 修改信息弹窗
// const editInfoDialog = ref(false);
// 获取子组件回传的状态值
const handleVisibleUpdate = (visible: boolean) => {
  data.dialogVisible.visible = visible;
};

// 获取修改组件回传的状态值
const handleUserinfoEdit = (visible: boolean) => {
  data.editInfoDialog.visible = visible;
};

// 聊天列表，历史数据
const count = ref(5);
const load = () => {
  count.value += 2;
};

// 新建聊天
function addChat() {
  console.log("1111");
  count.value += 1;
}

// 确认清空聊天记录
const confirmEvent = () => {
  console.log("confirm!");
  count.value = 0;
};

// 设置
function handleSet() {
  console.log(11);
  data.dialogVisible.visible = true;
}

// 修改信息
const handleEditInfo = () => {
  data.editInfoDialog.visible = true;
};

// 自定义验证方法，用于校验用户名
const matchUsername = (
  rule: any,
  value: string,
  callback: (error?: Error) => void
): void => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else if (value.toString().length !== 11) {
    callback(new Error("请输入11位账号"));
  } else {
    callback();
  }
};

// 表单校验规则
const rules = reactive<FormRules<typeof userData>>({
  username: [
    {
      required: true,
      // message: "请输入账号",
      trigger: "blur",
      validator: matchUsername,
    },
  ],
  nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  address: [{ required: true, message: "请输入住址", trigger: "blur" }],
});

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  try {
    submitLoading.value = true;
    if (!formEl) {
      return; // 提前返回，避免后续的 null 引用错误
    }
    // 将 validate 调用转换为支持 async/await 的形式
    const valid = await new Promise((resolve) => formEl.validate(resolve));
    if (valid) {
      await AccountApi.edit(userData);
      ElMessage.success("修改成功"); // 修改消息文本以反映操作的性质
      data.editInfoDialog.visible = false;
    }
  } finally {
    submitLoading.value = false; // 确保关闭加载指示
  }
};

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
// 取消修改
const cancel = () => {
  data.editInfoDialog.visible = false;
};

// 显示单个聊天的下拉
const showDropdown = (i: number) => {
  dropdownVisible.value[i] = true;
};

const hideDropdown = (i: number) => {
  dropdownVisible.value[i] = false;
};

const handleCommand = (command: string) => {
  if (command === "delete") {
    // Handle delete action
  }
};

// 退出
function signout() {
  try {
    AccountApi.logout().then(() => {
      local.remove("token");
      window.location.reload();
      //   router.replace("/");
    });
  } catch (error) {
    console.error("logout:", error);
  }
}

// 监听修改弹窗状态
watch(
  () => data.editInfoDialog.visible,
  (value) => {
    if (value && store?.accountInfo) {
      userData = store?.accountInfo;
    }
  }
);
</script>
<style lang="less" scoped>
/* 设置垂直滚动条 */
::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

/* 设置滚动条轨道（背景） */
::-webkit-scrollbar-track {
  background: #fafafa; /* 滚动条轨道背景色 */
  border-radius: 5px; /* 圆角 */
}

/* 设置滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #fafafa; /* 滚动条滑块颜色 */
  border-radius: 5px; /* 圆角 */
}

// /* 滑块在鼠标悬停时的样式 */
// ::-webkit-scrollbar-thumb:hover {
//   background: #888; /* 滚动条滑块颜色 */
// }

.container_left {
  width: 100%;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  // background-color: whitesmoke;
  border-right: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
  background: #f9fbff;
  .el-button {
    height: 35px;
    line-height: 35px;
  }
  .chat_btn {
    width: 225px;
    border: 1px dashed #abc;
  }

  .infinite-list {
    height:87%;
    width: 238px;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-top: 15px;
  }
  /* 鼠标放到整个容器时改变滚动条样式 */
  .infinite-list:hover::-webkit-scrollbar-thumb {
    background-color: #e5e7eb; /* 滚动条 thumb 背景颜色 */
  }
  /* 鼠标滑到滚动条上时的样式 */
  .infinite-list:hover::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* 滑块悬停颜色 */
  }
  .infinite-list .infinite-list-item {
    width: 225px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    padding: 12px;
    border-radius: 6px;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    .infinite-list-i {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .infinite-list-item:hover {
    border: 1px solid #409eff;
  }
  .infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
  }
  .clear_chat_btn {
    width: 225px;
    margin-top: 26px;
    border: 1px dashed #abc;
  }
  .avatar {
    width: 100%;
    height: 72px;
    border-top: 1px solid #abc;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 16px;
    overflow: hidden;
    box-sizing: border-box;
    .username {
      width: 150px;
      // border: 1px solid red;
      margin: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon {
      width: 40px;
      height: 36px;
      cursor: pointer;
    }
    .icon:hover {
      background-color: #e5e7eb;
      border-radius: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置阴影 */
    }
  }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.login-form-container {
  /* 根据需要设置登录表单的样式 */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  .login-form {
    margin-top: 20px;
    .btn_style {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .el-input {
      width: 245px;
    }
    .el-button {
      width: 23%;
      margin-top: 10px;
    }
  }
}
</style>
